import React, {Component} from 'react';
import Cropper from 'react-cropper';
import classnames from 'classnames';
import './UserCover.less';

import ReIcon from 'components/widgets/ReIcon';
import ReTextField from 'components/widgets/ReTextField';


export default class UserCover extends Component {

    constructor(props, context) {
        super(props, context);

    }


    render() {
        let {cover=''}=this.props;
        return <div className="modal-wrapper">
            <div className="user-cover-wrapper">
                <div className="header-wrapper">
                    <div className="title-wrapper">
                        <span>装饰主页</span>
                        <span>(点击图片可更换封面)</span>
                    </div>
                    <div className="icon-wrapper" onClick={this.handleCancel}>
                        <ReIcon icon='window_closes' className='icon'/>
                    </div>
                </div>
                <div className="content-wrapper">
                    <div className="img-pc-wrapper">
                        <img src={cover} alt=""/>
                        <div className="edit-cover-btn" onClick={this.handlePcClick}>PC端封面</div>
                    </div>
                    <div className="img-mobile-wrapper">
                        <img src="" alt=""/>
                        <div className="edit-cover-btn" onClick={this.handlePcClick}>{title}</div>
                    </div>
                </div>
                <div className="footer-wrapper">
                    <div className="btn-left" onClick={this.handleCancel}>取消</div>
                    <div className="btn-right" onClick={this.handleSubmit}>确定</div>
                </div>
            </div>
        </div>
    }

    handleCancel=()=>{
        let {hide}=this.props;
        hide&&hide()
    }

    handleSubmit=()=>{
        let {confirm}=this.props;
        confirm&&confirm()
    }

    handlePcClick=()=>{
        let {pcCoverClick}=this.props;
        pcCoverClick&&pcCoverClick();
    }


}